<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.send{
				background-color: #f7f7f7;
				border: none;
				position: absolute;
				right: 10px;
				top: 6px;
			}
			
			.feedback{
				padding-top: 44px;
			}
			.feedback body {
				background-color: #EFEFF4;
			}
			.feedback input,
			.feedback textarea {
				border: none !important;
			}
			.feedback textarea {
				height: 100px;
				margin-bottom: 0 !important;
				padding-bottom: 0 !important;
			}
			.feedback .row {
				width: 100%;
				background-color: #fff;
			}
			.feedback p {
				padding: 10px 15px 0;
			}
			/*.feedback button#submit { 
				width: 90%;
				height: 46px;
				left: 50%;
				-webkit-transform: translate(-50%);
			}*/
			
			input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
				font-size: 14px;
			}
			
			.feedback .hidden {
				display: none;
			}
			.feedback .image-list {
				width: 100%;
				height: 85px;
				background-size: cover;
				padding: 10px 10px;
				overflow: hidden;
				position: relative;
			}
			.feedback .image-item {
				width: 65px;
				height: 65px;
				/*background-image: url(../images/iconfont-tianjia.png);*/
				background-size: 100% 100%;
				display: inline-block;
				position: relative;
				border-radius: 5px;
				margin-right: 10px;
				margin-bottom: 10px;
				border: solid 1px #e8e8e8;
				vertical-align: top;
			}
			.feedback .image-item .file {
				position: absolute;
				left: 0px;
				top: 0px;
				width: 100%;
				height: 100%;
				opacity: 0;
				cursor: pointer;
				z-index: 0;
			}
			.feedback .image-item.space {
				border: none;
			}
			.feedback .image-item .image-close {
				position: absolute;
				display: inline-block;
				right: -6px;
				top: -6px;
				width: 20px;
				height: 20px;
				text-align: center;
				line-height: 20px;
				border-radius: 12px;
				background-color: #FF5053;
				color: #f3f3f3;
				border: solid 1px #FF5053;
				font-size: 9px;
				font-weight: 200;
				z-index: 1;
			}
			.feedback .image-item .image-up{
				height: 65px;
				width: 65px;
				border-radius: 10px;
				line-height: 65px;
				border: 1px solid #ccc;
				color: #ccc; 
				display: inline-block;
				text-align: center;
			}
			.feedback .image-item .image-up:after{
				font-family: "微软雅黑";
				content: '+';
				font-size: 60px;
			}
			.feedback .image-item.space .image-close {
				display: none;
			}
			.feedback .mui-inline{
				vertical-align: bottom;
				font-size: 14px;
				color: #8f8f94;
			}
			.mui-icon-star{
				color: #B5B5B5;
				font-size: 22px;
			}
			.mui-icon-star-filled{
				color: #FFB400;
				font-size: 22px;
			} 
			.mui-popover {
				height: 180px;
			}
			.stream{
				display: none;
			}
			.mui-plus-stream .stream{
				display: block;
			}
			
			/* 添加图片按钮 */
			.addImg{
				width: 50px;
				height: 50px;
				font-size: 30px;
				position: absolute;
				right: 10px;
				top: 50%;
				margin-top: -25px;
				}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">意见反馈</h1>
			<button type="button" class="send">发送</button>
		</header>
		
		
		<!-- 内容 -->
		<div id="feedback" class="mui-page feedback">
			<div class="mui-page-content">
				<!-- <div class="mui-content-padded">
					<div class="mui-inline">问题和意见</div>
					<a class="mui-pull-right mui-inline" href="#popover">
						快捷输入
						<span class="mui-icon mui-icon-arrowdown"></span>
					</a>
				</div> -->
				<div class="row mui-input-row">
					<textarea id='question' class="mui-input-clear question" placeholder="请详细描述你的问题和意见..."></textarea>
				</div>
				<p>图片(选填,提供问题截图,总大小10M以下)</p>
				<div id='image-list' class="row image-list">
					<button type="button" class="addImg">+</button>
				</div>
				<p>QQ/邮箱</p>
				<div class="mui-input-row">
					<input id='contact' type="text" class="mui-input-clear contact" placeholder="(选填,方便我们联系你 )" />
				</div>
				<!-- <div class="mui-content-padded">
					<div class="mui-inline">应用评分</div>
					<div class="icons mui-inline" style="margin-left: 6px;">
						<i data-index="1" class="mui-icon mui-icon-star"></i>
						<i data-index="2" class="mui-icon mui-icon-star"></i>
						<i data-index="3" class="mui-icon mui-icon-star"></i>
						<i data-index="4" class="mui-icon mui-icon-star"></i>
						<i data-index="5" class="mui-icon mui-icon-star"></i>
					</div>
				</div><br /> -->
			</div>
		</div>
		
		
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.view.js"></script>
		<script type="text/javascript">
			mui.init();
			
		</script>
		
	</body>

</html>
